<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
// 组件
import { ElMessage, ElMessageBox } from 'element-plus'
import Form from './dialog/Form/index.vue'
// 接口
import type {
  IRoleData,
  IRoleQueryData,
  IRoleResponseData,
} from '@/api/system/role/type'
import type { ResponseData } from '@/types/common'
// api
import { reqRoleList, reqRoleDel } from '@/api/system/role/index'

// 子组件实例
const formRef = ref()
// 列表请求参数
let params = reactive<IRoleQueryData>({
  roleName: '',
  page: 1,
  limit: 10,
})
// 列表数据
let tableData = ref<IRoleData[]>([])
// 总条数
let total = ref<number>(0)
// 打开弹窗
let dialogVisible = ref<boolean>(false)

// 获取列表数据
const getList = async () => {
  const { code, message, data }: IRoleResponseData = await reqRoleList(params)
  const { total: listTotal, records } = data
  if (code === 200) {
    tableData.value = records || []
    total.value = listTotal || 0
  } else {
    ElMessage({
      type: 'error',
      message,
    })
  }
}
// 分页切换
const handlePageChange = (currentPage: number, pageSize: number) => {
  params.page = currentPage
  params.limit = pageSize
  getList()
}
// 搜索
const handleQuery = () => {
  getList()
}
// 重置筛选条件
const handleReset = () => {
  params.roleName = ''
  params.page = 1
  getList()
}
// 新增角色
const handleAdd = () => {
  dialogVisible.value = true
}
onMounted(() => {
  getList()
})
// 修改角色
const handleEdit = (row: IRoleData) => {
  formRef.value.setFormData(row)
  dialogVisible.value = true
}
// 删除角色
const handleDel = (row: IRoleData) => {
  ElMessageBox.confirm('确定删除这条数据吗', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { code, message }: ResponseData = await reqRoleDel(row.id)
    if (code === 200) {
      ElMessage({
        type: 'success',
        message,
      })
      getList()
    } else {
      ElMessage({
        type: 'error',
        message,
      })
    }
  })
}
</script>
<template>
  <div class="common-layout">
    <el-container>
      <!-- 筛选条件 -->
      <el-header>
        <el-form :model="params" inline>
          <el-form-item label="角色名">
            <el-input v-model="params.roleName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!-- 表格 -->
      <el-main>
        <el-table :data="tableData" border>
          <el-table-column prop="roleName" label="角色名" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" />
          <el-table-column prop="roleName" label="操作" align="center">
            <template #="scope">
              <el-button type="primary" link @click="handleEdit(scope.row)">
                修改
              </el-button>
              <el-button type="danger" link @click="handleDel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 分页 -->
      <el-footer>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-change="params.page"
          :page-size="params.limit"
          @change="handlePageChange"
        />
      </el-footer>
    </el-container>
    <!-- 新增修改弹窗 -->
    <Form ref="formRef" v-model="dialogVisible" @refresh-list="getList"></Form>
  </div>
</template>
